require(["./config"], () => {
  require(["swiper", "template", "header", "footer"], (Swiper, template) => {
    class Index {
      constructor() {
        this.init();
        this.banner();
        this.shopCategory();
        this.shopList();
      }
      init() {
        //初始化
        // 渲染shopCategory数据
      }
      //   轮播图
      banner() {
        const $ol = $(".banner ol");
        const $ul = $(".banner ul");
        const $ulis = $(".banner ul li");
        const $left = $(".left");
        const len = $ulis.length;
        const $right = $(".right");
        $(".banner ul li:first")
          .clone()
          .appendTo($ul);
        $(".banner ul li:eq(3)")
          .clone()
          .prependTo($ul);
        let flag = true; //判断是否可以移动
        //创建小圆点
        for (let i = 1; i < len; i++) {
          $("<li></li>").appendTo($ol);
        }
        const $ols = $("ol li"); //获取小圆点

        //点击小圆点切换
        $ol.on("click", "li", function() {
          //小圆点点击移动函数
          $ul.stop(true);
          $(this)
            .addClass("atv")
            .siblings()
            .removeClass("atv");
          const index = $(this).index() + 1;
          $ul.stop(true);
          $ul.animate(
            {
              left: -index * 600
            },
            800,
            function() {
              flag = true;
            }
          );
        });
        function moveRight() {
          //点击右
          if (flag) {
            flag = false;
            $ul.stop(true);
            const index = $(".atv").index() + 2;
            $ul.animate(
              {
                left: -index * 600
              },
              2000,
              function() {
                flag = true;
              }
            );
            if (index === 5) {
              $ul.animate(
                {
                  left: -600
                },
                0
              );
              $ols
                .eq(0)
                .addClass("atv")
                .siblings()
                .removeClass("atv");
            } else {
              $ols
                .eq(index - 1)
                .addClass("atv")
                .siblings()
                .removeClass("atv");
            }
          }
        }
        //  点击左右切换
        $left.on("click", function() {
          //点击左
          if (flag) {
            flag = false;
            $ul.stop(true);
            const index = $(".atv").index();
            $ul.animate(
              {
                left: -index * 600
              },
              2000,
              function() {
                flag = true;
              }
            );
            if (index === 0) {
              $ul.animate(
                {
                  left: -len * 600
                },
                0
              );
              $ols
                .eq(len - 1)
                .addClass("atv")
                .siblings()
                .removeClass("atv");
            } else {
              $ols
                .eq(index - 1)
                .addClass("atv")
                .siblings()
                .removeClass("atv");
            }
          }
        });
        $right.on("click", moveRight);
        let timer = setInterval(moveRight, 2000);
        $(".banner ").hover(
          function() {
            clearInterval(timer);
          },
          function() {
            timer = setInterval(moveRight, 2000);
          }
        );
      }
      // 商品种类  使用本地json
      shopCategory() {
        const that = this
        $.get("/libs/json/shopCategory.json", resp => {
          const str = template("categoryTemplate", { list: resp });
          $("#categoryList").html(str);
          $(".content-sort div").eq(0).addClass('sort-atv')
          $(".content-sort").on('click','div',function(){
            $(this).addClass('sort-atv').siblings().removeClass('sort-atv')
            that.shopList()
          })
        });
      }
      // 具体商品  使用rap2
      shopList() {
        $.get("http://rap2api.taobao.org/app/mock/244915/shoplist", resp => {
          console.log(resp);
          const { list } = resp;
          console.log(list);
          const str = template("shopListTemplate", { list });
          $("#shopList").html(str);
        });
      }
    }
    new Index();
  });
});
